<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<title>频率统计</title>
		<link rel="stylesheet" href="../../lib/element-ui/theme-chalk/index.css">
		<link rel="stylesheet" href="../../lib/vxe-table/index.css">
		<link rel="stylesheet" href="../../lib/vxe-table-plugin-element/style.css">
		<link rel="stylesheet" href="../../lib/font-awesome/css/font-awesome.min.css">
		<link rel="stylesheet" href="../../static/css/skins.css">
		<script type="text/javascript" src="../../lib/vue/vue.js"></script>
		<script type="text/javascript" src="../../lib/xe-utils/xe-utils.js"></script>
		<script type="text/javascript" src="../../lib/element-ui/index.js"></script>
		<script type="text/javascript" src="../../lib/vxe-table/index.js"></script>
		<script type="text/javascript" src="../../lib/vxe-table-plugin-element/index.js"></script>
		<script type="text/javascript" src="../../lib/xlsx/xlsx.full.min.js"></script>
		<script type="text/javascript" src="../../lib/vxe-table-plugin-export-xlsx/index.min.js"></script>
		<script type="text/javascript" src="../../lib/xe-ajax/xe-ajax.js"></script>
		<script type="text/javascript" src="../../static/js/jquery.min.js"></script>
		<script type="text/javascript" src="../../lib/echart/echarts.min.js" charset="utf-8"></script>
		<script type="text/javascript" src="../../lib/layer/layer.min.js"></script>
		<script type="text/javascript" src="../../static/js/MD5/Base64.js"></script>
		<script type="text/javascript" src="../../static/js/MD5/md5.js"></script>
		<script type="text/javascript" src="../../static/js/webApi.js"></script>
		<script src="../../static/js/tool.js"></script>
		<style type="text/css">
			/* @media screen and (min-width: 1080px) { */
			body {
				overflow: hidden;
				width: 100vw;
				height: 100vh;
				margin: 0 auto;
				padding: 0 auto;
				background-color: transparent;
			}

			body #pic1 .active,
			body #pic2 .active,
			body #pic3 .active,
			body #pic4 .active {
				display: block;
			}

			.header .el-form-item__content {
				/* padding-top: 0.4vh; */
				line-height: 0px
			}

			body .none {
				display: none;
			}

			body .header {
				width: 96vw;
				height: 50px;
				border: 1px solid transparent;
				margin-top: 1%;
				margin-left: 2%;
				border-radius: 4px;
				/* 兼容 */
				-webkit-Box-shadow: 0 0 10px #528BFF;
				-moz-box-shadow: 0 0 10px #528BFF;
				/*firefox*/
				-webkit-box-shadow: 0 0 10px #528BFF;
				/*webkit*/
				box-shadow: 0 0 10px #528BFF;
			}

			/* body .header div {
                display: inline-block;
            } */

			body .header div {
				margin-left: 0.3125rem;
			}

			body .header .el-form-item__label {
				/* padding-top: 0.4vh; */
			}

			body .header .el-input__inner,
			.el-form-item__label {
				font-size: medium;
				color: #000;
				border: none;
				background-color: transparent
			}

			body .header div p {
				font-size: 1em;
				/* color: #575757; */
			}

			body .middle {
				width: 97vw;
				height: 51vh;
				margin-top: 2vh;
				margin-left: 2vw;
				/* border: 1px solid; */
			}

			body .middle .echart1,
			body .middle .message {
				display: inline-block;
			}

			body .middle .echart1 {
				overflow: hidden;
				width: 96vw;
				height: 100%;
				border: 1px solid transparent;
				border-radius: 4px;
				/* 兼容 */
				-webkit-Box-shadow: 0 0 10px #528BFF;
				-moz-box-shadow: 0 0 10px #528BFF;
				/*firefox*/
				-webkit-box-shadow: 0 0 10px #528BFF;
				/*webkit*/
				box-shadow: 0 0 10px #528BFF;
			}

			body .middle .message {
				letter-spacing: 1px;
				width: calc(26.7vw - 2px);
				height: 100%;
				margin-left: 1vw;
				border: 1px solid transparent;
				border-radius: 4px;
				/* 兼容 */
				-webkit-Box-shadow: 0 0 10px #528BFF;
				-moz-box-shadow: 0 0 10px #528BFF;
				/*firefox*/
				-webkit-box-shadow: 0 0 10px #528BFF;
				/*webkit*/
				box-shadow: 0 0 10px #528BFF;
			}

			body .middle .message .hide {
				display: none;
			}

			body .middle .message li {
				margin-top: 3px;
				list-style-type: none;
			}

			body .middle .message .layui-card {
				height: inherit;
				margin-bottom: 0px;
				overflow-y: auto;
				overflow-x: hidden;
			}

			body .middle .message .layui-card .layui-card-header {
				margin-left: 10px;
				height: 32px;
				line-height: 31px;
			}

			body .middle .message .layui-card .layui-card-header .layui-card-header-left {
				font-size: 14px;
				color: #000;
				float: left;
				border-bottom: 3px solid;
				padding: 0px 3px;
				font-weight: bold;
			}

			body .middle .message .layui-card .layui-card-header .layui-card-header-right {
				float: right;
				font-size: 10px;
				padding: 0px 5px;
				color: #000;
			}

			body .middle .message .layui-card .layui-card-body {
				margin-left: 10px;
			}

			body .middle .message .layui-card .layui-card-body-li-finish {
				text-align: center;
				line-height: 100px;
				color: #000;
				font-size: 18px;
			}

			body .middle .message .layui-card .layui-card-body-li-none {
				color: #000;
				font-weight: 600;
				font-size: small;
			}

			body .middle .message .layui-card .layui-card-body-li-left {
				margin-left: 2px;
				color: #000;
				font-size: 10px;
				display: inline-block;
				max-width: 80%;
				height: 20px;
				line-height: 20px;
				overflow: hidden;
			}

			body .middle .message .layui-card .layui-card-body-li-right {
				font-size: 12px;
				color: #03a9f4;
				text-decoration: none;
				float: right;
				width: 70px;
				height: 20px;
				line-height: 20px;
				text-align: center;
			}

			body .footer {
				width: 96vw;
				height: calc(34vh - 20px);
				margin-top: 2vh;
				margin-left: 2vw;
			}

			body .footer .echart2,
			body .footer .echart3,
			body .footer .echart4 {
				overflow: hidden;
				display: inline-block;
			}

			body .footer .echart2 {
				width: calc(60vw - 6px);
				height: 100%;
				border: 1px solid transparent;
				border-radius: 4px;
				/* 兼容 */
				-webkit-Box-shadow: 0 0 10px #528BFF;
				-moz-box-shadow: 0 0 10px #528BFF;
				/*firefox*/
				-webkit-box-shadow: 0 0 10px #528BFF;
				/*webkit*/
				box-shadow: 0 0 10px #528BFF;
			}

			body .footer .echart3 {
				width: 34.8vw;
				height: 100%;
				margin-left: 0.625rem;
				border: 1px solid transparent;
				border-radius: 4px;
				/* 兼容 */
				-webkit-Box-shadow: 0 0 10px #528BFF;
				-moz-box-shadow: 0 0 10px #528BFF;
				/*firefox*/
				-webkit-box-shadow: 0 0 10px #528BFF;
				/*webkit*/
				box-shadow: 0 0 10px #528BFF;
			}

			body .footer .echart4 {
				width: calc(26.7vw - 2px);
				height: 100%;
				margin-left: 1vw;
				border: 1px solid transparent;
				border-radius: 4px;
				/* 兼容 */
				-webkit-Box-shadow: 0 0 10px #528BFF;
				-moz-box-shadow: 0 0 10px #528BFF;
				/*firefox*/
				-webkit-box-shadow: 0 0 10px #528BFF;
				/*webkit*/
				box-shadow: 0 0 10px #528BFF;
			}

			[v-cloak] {
				display: none;
			}
		</style>
	</head>

	<body>
		<div id="app">
			<div class="header" style="display: flex;align-items: center;">
				<el-row>
					<el-col>
						<div>
							<span>根据日期查看：</span>
						</div>
					</el-col>
				</el-row>
				<el-row style="margin-left: 0px;">
					<el-col>
						<el-radio-group>
							<div class="block">
								<span class="demonstration">带快捷选项</span>
								<el-date-picker @change="changeTime" size="large" v-model="value2"
									value-format="yyyy-MM-dd" type="daterange" align="left" unlink-panels
									range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
									:picker-options="pickerOptions">
								</el-date-picker>
							</div>
						</el-radio-group>
					</el-col>
				</el-row>
			</div>
			<div class="middle">
				<div class="echart1" id="pic1" ref="pic1"></div>
			</div>
			<div class="footer">
				<div class="echart2" id="pic2"></div>
				<div class="echart3" id="pic3"></div>
			</div>
		</div>

	</body>

	<script type="text/javascript">
		window.onload = function() {
			var main = {
				data() {
					return {
						pickerOptions: {
							shortcuts: [{
								text: '最近一周',
								onClick(picker) {
									const end = new Date();
									const start = new Date();
									start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
									picker.$emit('pick', [start, end]);
								}
							}, {
								text: '最近一个月',
								onClick(picker) {
									const end = new Date();
									const start = new Date();
									start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
									picker.$emit('pick', [start, end]);
								}
							}, {
								text: '最近三个月',
								onClick(picker) {
									const end = new Date();
									const start = new Date();
									start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
									picker.$emit('pick', [start, end]);
								}
							}]
						},
						value2: [],
					};
				},
				created() {
					let data = new Date()
					let year = data.getFullYear()
					let month = data.getMonth()+1
					let strDate = data.getDate()
					if (month >= 1 && month <= 9) {
					    month = "0" + month;
					}
					if (strDate >= 0 && strDate <= 9) {
					    strDate = "0" + strDate;
					}
					this.value2[0] = year+'-'+month+'-'+strDate,
					this.value2.push(year+'-'+month+'-'+strDate)
					console.log(this.value2[0])
					console.log(this.value2[1])
				},
				mounted() {
					this.getEchart();
				},
				methods: {
					changeTime(value) {
						this.getEchart()
					},
					getEchart() {
						// console.log(this.value2)
							console.log(new Date())
						//菜单图表
						let params = Object.assign({
							beginDate: this.value2[0],
							endDate: this.value2[1]
						});
						let myChart = echarts.init(document.getElementById("pic1"));
						let data = []
						webApi('/log/getMenuChartsData', 'post', params, function(data) {
							option.series[0].data = data.data[1];
							option.xAxis.data = data.data[0];
							myChart.setOption(option);
						})
						let option;
						option = {
							title: {
								show: true,
								text: "菜单访问频率",
								x: 'left',
								top: 3,
								textStyle: {
									color: '#000',
									fontSize: 14,
									fontWeight: 'bold',
								}
							},
							color: '#68DFE3',
							xAxis: {
								type: 'category',
								//菜单名称
								data: []
							},
							yAxis: {
								type: 'value'
							},
							series: [{
								//使用频率
								data: [],
								type: 'bar',
								itemStyle: {
									normal: {
										color: function(params) {
											var colorList = [
												'#C1232B', '#B5C334', '#FCCE10', '#E87C25',
												'#27727B',
												'#FE8463', '#9BCA63', '#FAD860', '#F3A43B',
												'#60C0DD',
												'#D7504B', '#C6E579', '#F4E001', '#F0805A',
												'#26C0C0'
											];
											return colorList[params.dataIndex]
										},
										//以下为是否显示，显示位置和显示格式的设置了
										label: {
											show: true,
											position: 'top',
											formatter: '{b}\n{c}'
										}
									}
								},
								//设置柱的宽度，要是数据太少，柱子太宽不美观~
								barWidth: 50,
							}]
						};
						//人员图表
						let myChart1 = echarts.init(document.getElementById("pic2"));

						webApi('/log/getUserChartsData', 'post', params, function(data) {
							//每项的值
							option1.series[0].data = data.data[1];
							//x轴的值
							option1.xAxis.data = data.data[0];
							myChart1.setOption(option1);
						})
						let option1;
						option1 = {
							title: {
								show: true,
								text: "人员访问频率",
								x: 'left',
								top: 3,
								textStyle: {
									color: '#000',
									fontSize: 14,
									fontWeight: 'bold',
								}
							},
							color: '#FFD573',
							grid: {
								height: 165
							},
							xAxis: {
								type: 'category',
								//人员名称
								data: []
							},
							yAxis: {
								type: 'value'
							},
							series: [{
								//使用频率
								data: [],
								type: 'bar',
								itemStyle: {
									normal: {
										color: function(params) {
											var colorList = [
												'#FE8463', '#9BCA63', '#FAD860', '#F3A43B',
												'#60C0DD',
												'#C1232B', '#B5C334', '#FCCE10', '#E87C25',
												'#27727B',
												'#D7504B', '#C6E579', '#F4E001', '#F0805A',
												'#26C0C0'
											];
											return colorList[params.dataIndex]
										},
										//以下为是否显示，显示位置和显示格式的设置了
										label: {
											show: true,
											position: 'top',
											formatter: '{b}\n{c}'
										}
									}
								},
								barWidth: 50,
							}]
						};

						//成功/错误请求数量
						let myChart2 = echarts.init(document.getElementById("pic3"));
						webApi('/log/getErrorChartsData', 'post', params, function(data) {
							data.data.forEach((item) => {
								option2.series[0].data.push({
									value: item.value,
									name: item.name
								})
							})
							myChart2.setOption(option2);
						})
						let option2;
						option2 = {
							title: {
								text: '成功&错误请求数量',
								subtext: '',
								left: 'center'
							},
							color: ['#85AF9D', '#CFCCAE'],
							tooltip: {
								trigger: 'item',
							},
							legend: {
								orient: 'vertical',
								left: 'left'
							},
							series: [{
								name: '',
								type: 'pie',
								radius: '70%',
								data: [],
								emphasis: {
									itemStyle: {
										shadowBlur: 10,
										shadowOffsetX: 0,
										shadowColor: 'rgba(0, 0, 0, 0.5)'
									}
								},
								label: { //饼图图形上的文本标签
									normal: {
										show: true,
										position: 'inner', //标签的位置
										textStyle: {
											fontWeight: 300,
											fontSize: 16 //文字的字体大小
										},
										formatter: '{d}%'


									}
								},
							}]
						};
					}

				}
			}
			var vue = Vue.extend(main);
			new vue().$mount('#app');
		}
	</script>

</html>
